import React from "react";
import { TabBar } from 'antd-mobile';
import { Route } from "react-router-dom";
// 首页
import Home from "./home/index";
// 列表找房
import Found from "./found";
// 我的
import My from "./my";


class HKTabBar extends React.Component {
  render() {
    return (
      <div style={{ position: 'fixed', height: '100%', width: '100%', top: 0 }}>
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#21b97a"
          barTintColor="white"
        >
          <TabBar.Item
            title="首页"
            key="index"
            icon={<i style={{ fontSize: 24 }} className="iconfont icon-ind"></i>}
            selectedIcon={<i style={{ color: "#21b97a", fontSize: 24 }} className="iconfont icon-ind"></i>}
            selected={this.props.location.pathname === "/home/index"}
            onPress={() => {
              this.props.history.push("/home/index")
            }}
          >
            <Route path="/home/index" component={Home}  ></Route>
          </TabBar.Item>
          <TabBar.Item
            icon={<i style={{ fontSize: 24 }} className="iconfont icon-findHouse"></i>}
            selectedIcon={<i style={{ color: "#21b97a", fontSize: 24 }} className="iconfont icon-findHouse"></i>}
            title="找房"
            key="found"

            selected={this.props.location.pathname === "/home/found"}
            onPress={() => {
              this.props.history.push("/home/found")
            }}
          >
            <Route path="/home/found" component={Found}  ></Route>
          </TabBar.Item>
          <TabBar.Item
            icon={<i style={{ fontSize: 24 }} className="iconfont icon-my"></i>}
            selectedIcon={<i style={{ color: "#21b97a", fontSize: 24 }} className="iconfont icon-my"></i>}
            title="我的"
            key="my"
            selected={this.props.location.pathname === "/home/my"}
            onPress={() => {
              this.props.history.push("/home/my")
            }}
          >
            <Route path="/home/my" component={My}  ></Route>
          </TabBar.Item>
        </TabBar>
      </div>
    );
  }
}

export default HKTabBar